<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        html,
        body {
            margin: 0;
            padding: 0;
            background-color: #ccc;
        }
        
        table {
            border-collapse: collapse;
            width: 800px;
            margin: 0 auto;
            background-color: white;
        }
        
        th,
        td {
            width: 150px;
            border: 1px solid black;
        }
    </style>
    <script>
        window.onload = function() {
            var arr = [{
                isCheck: false,
                name: "拯救大兵瑞恩",
                year: 2000,
                score: 3
            }, {
                isCheck: false,
                name: "大话西游",
                year: 1998,
                score: 2
            }, {
                isCheck: false,
                name: "我和僵尸有个约会",
                year: 1997,
                score: 1
            }, {
                isCheck: false,
                name: "恋爱大过天",
                year: 2000,
                score: 4
            }, {
                isCheck: false,
                name: "全城热恋",
                year: 2000,
                score: 5
            }]
            var tbody = document.querySelector("tbody");
            var tfoot = document.querySelector("tfoot");
            var showList = function() {
                var content = "";
                for (var i = 0; i < arr.length; i++) {
                    content = content + "<tr index=" + i + "><td><input type='checkbox' class='select'>" + arr[i].name + "</td><td>" + arr[i].year + "</td><td><button class='btn-minus'>-</button><span>" + arr[i].score + "星" + "</span><button class='btn-add'>+</button></td><td><button class='btn-delete'>" + "删除" + "</button></td></tr>";
                }
                tbody.innerHTML = content;
                var selects = document.querySelectorAll(".select");
                var totalStar = 0;
                for (var i = 0; i < arr.length; i++) {
                    selects[i].checked = arr[i].isCheck;
                    if (arr[i].isCheck) {
                        totalStar = totalStar + arr[i].score;
                    }
                }
                tfoot.innerHTML = "总星星:" + totalStar;
                for (var i = 0; i < selects.length; i++) {
                    selects[i].addEventListener("change", function(e) {
                        var state = this.checked;
                        var td = this.parentNode;
                        var tr = td.parentNode;
                        var index = tr.getAttribute("index");
                        arr[index].isCheck = state;
                        showList();
                    })
                }

                var btnDeteles = document.querySelectorAll(".btn-delete");
                console.log(btnDeteles);
                for (var i = 0; i < btnDeteles.length; i++) {
                    console.log(btnDeteles[i]);
                    btnDeteles[i].addEventListener("click", function(e) {
                        var parent = this.parentNode.parentNode;
                        var index = parent.getAttribute("index");
                        console.log(index);
                        tbody.removeChild(this.parentNode.parentNode);
                        arr.splice(index, 1);
                        showList();
                    })

                }
                for (var i = 0; i < selects.length; i++) {
                    selects[i].addEventListener("change", function(e) {
                        if (e.target.checked == false) {
                            selectAll.checked = false;
                        }
                    })
                }
                var btnAdds = document.querySelectorAll(".btn-add");
                console.log(btnAdds);
                for (var i = 0; i < btnAdds.length; i++) {
                    btnAdds[i].addEventListener("click", function(e) {
                        var td = this.parentNode;
                        var tr = td.parentNode;
                        var index = tr.getAttribute("index");
                        console.log(index);
                        var score = arr[index].score;
                        arr[index].score = score + 1;
                        showList();
                    });
                }
                var btnMinus = document.querySelectorAll(".btn-minus");
                for (var i = 0; i < btnMinus.length; i++) {
                    btnMinus[i].addEventListener("click", function() {
                        var td = this.parentNode;
                        var tr = td.parentNode;
                        var index = tr.getAttribute("index");
                        var score = arr[index].score;
                        arr[index].score = score - 1;
                        showList();
                    })
                }
                var selectAll = document.querySelector(".select-all");
                selectAll.addEventListener("change", function(e) {
                    var state = selectAll.checked;
                    for (var i = 0; i < arr.length; i++) {
                        arr[i].isCheck = state;
                    }
                    showList();
                })


            }
            showList();
        }
    </script>
</head>

<body>
    <table>
        <thead>
            <tr>
                <th><input type="checkbox" class="select-all">作品名字</th>
                <th>上映日期</th>
                <th>星级</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>

        </tbody>
        <tfoot>
            <tr>
                <th colspan="4"></th>
            </tr>
        </tfoot>
    </table>
</body>

</html>